<style>
.layui-body-header {

    padding: 13px 20px;
    color: #333;
    font-size: 16px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

}
.layui-body-header-title {

    border-left-color: #1e90ff;

}
.layui-body-header-title {

    border-left: 4px solid #009688;
        border-left-color: rgb(0, 150, 136);
    padding-left: 6px;

}
</style>

<!-- 主体部分 -->
<div class="layui-body">

    <div class="layui-body-header">
        <span class="layui-body-header-title">admin风格弹窗</span>
        <span class="layui-breadcrumb pull-right" style="visibility: visible;">
          <a href="https://demo.easyweb.vip/pro/index.html">首页</a><span lay-separator="">/</span>
          <a><cite>admin风格弹窗</cite></a>
        </span>
    </div>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body layui-form text-center" style="padding: 80px 20px;">

                <button id="btn1" class="layui-btn">成功消息</button>

                <button id="btn2" class="layui-btn layui-btn-warm">警告消息</button>

                <button id="btn3" class="layui-btn layui-btn-danger">失败消息</button>

                <button id="btn4" class="layui-btn layui-btn-normal">通知消息</button>

                <br><br><br>

                位置：
                <div style="width: 150px;display: inline-block;">
                    <select id="noticePosition">
                        <option value="topLeft" selected="selected">topLeft</option>
                        <option value="topRight">topRight</option>
                        <option value="bottomLeft">bottomLeft</option>
                        <option value="bottomRight">bottomRight</option>
                        <option value="topCenter">topCenter</option>
                        <option value="bottomCenter ">bottomCenter</option>
                        <option value="center">center</option>
                    </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="topLeft" readonly="readonly" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="topLeft" class="layui-this">topLeft</dd><dd lay-value="topRight" class="">topRight</dd><dd lay-value="bottomLeft" class="">bottomLeft</dd><dd lay-value="bottomRight" class="">bottomRight</dd><dd lay-value="topCenter" class="">topCenter</dd><dd lay-value="bottomCenter " class="">bottomCenter</dd><dd lay-value="center" class="">center</dd></dl></div>
                </div>  
                进入动画：
                <div style="width: 150px;display: inline-block;">
                    <select id="noticeIn">
                        <option value="bounceInLeft" selected="selected">bounceInLeft</option>
                        <option value="bounceInRight">bounceInRight</option>
                        <option value="bounceInUp">bounceInUp</option>
                        <option value="bounceInDown">bounceInDown</option>
                        <option value="fadeIn">fadeIn</option>
                        <option value="fadeInDown">fadeInDown</option>
                        <option value="fadeInUp">fadeInUp</option>
                        <option value="fadeInLeft">fadeInLeft</option>
                        <option value="fadeInRight">fadeInRight</option>
                        <option value="flipInX">flipInX</option>
                    </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="bounceInLeft" readonly="readonly" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="bounceInLeft" class="layui-this">bounceInLeft</dd><dd lay-value="bounceInRight" class="">bounceInRight</dd><dd lay-value="bounceInUp" class="">bounceInUp</dd><dd lay-value="bounceInDown" class="">bounceInDown</dd><dd lay-value="fadeIn" class="">fadeIn</dd><dd lay-value="fadeInDown" class="">fadeInDown</dd><dd lay-value="fadeInUp" class="">fadeInUp</dd><dd lay-value="fadeInLeft" class="">fadeInLeft</dd><dd lay-value="fadeInRight" class="">fadeInRight</dd><dd lay-value="flipInX" class="">flipInX</dd></dl></div>
                </div>  
                退出动画：
                <div style="width: 150px;display: inline-block;">
                    <select id="noticeOut">
                        <option value="fadeOut" selected="selected">fadeOut</option>
                        <option value="fadeOutUp">fadeOutUp</option>
                        <option value="fadeOutDown">fadeOutDown</option>
                        <option value="fadeOutLeft">fadeOutLeft</option>
                        <option value="fadeOutRight">fadeOutRight</option>
                        <option value="flipOutX">flipOutX</option>
                    </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="fadeOut" readonly="readonly" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="fadeOut" class="layui-this">fadeOut</dd><dd lay-value="fadeOutUp" class="">fadeOutUp</dd><dd lay-value="fadeOutDown" class="">fadeOutDown</dd><dd lay-value="fadeOutLeft" class="">fadeOutLeft</dd><dd lay-value="fadeOutRight" class="">fadeOutRight</dd><dd lay-value="flipOutX" class="">flipOutX</dd></dl></div>
                </div>

                <br><br><br>

                <button id="btn5" class="layui-btn layui-btn-normal">显示通知</button>

                <button id="btn6" class="layui-btn layui-btn-normal">关闭所有</button>

            </div>
        </div>
    </div>

</div>


<script>
layui.config({
	base: '/Public/Admin/' //静态资源所在路径
}).extend({
	notice: 'lib/extend/notice/notice',
}).use(['notice'],function(){
	var notice = layui.notice,
		$ = layui.$;
	
	$('#btn1').click(function () {
        notice.success({
            title: '消息通知',
            message: '你有新的消息，请注意查收!'
        });
    });

    $('#btn2').click(function () {
        notice.warning({
            title: '消息通知',
            message: '你有新的消息，请注意查收!'
        });
    });

    $('#btn3').click(function () {
        notice.error({
            title: '消息通知',
            message: '你有新的消息，请注意查收!'
        });
    });

    $('#btn4').click(function () {
        notice.info({
            title: '消息通知',
            message: '你有新的消息，请注意查收!'
        });
    });

    $('#btn5').click(function () {
        notice.info({
            title: '消息通知',
            message: '你有新的消息，请注意查收!',
            position: $('#noticePosition').val(),
            transitionIn: $('#noticeIn').val(),
            transitionOut: $('#noticeOut').val()
        });
    });

    $('#btn6').click(function () {
        notice.destroy();
    });
	
});

</script>